<template>
  <div class="w_editor">
    <!-- 富文本编辑器 -->
    <div id="w_view"></div>
  </div>
</template>

<script>
import { upfiles } from "@/request/api";
// 引入富文本
import WE from "wangeditor";
// 引入elementUI Message模块（用于提示信息）
import { Message } from "element-ui";

export default {
  name: "WEditor",
  props: {
    // 默认值
    defaultText: { type: String, default: "" },
    // 富文本更新的值
    richText: { type: String, default: "" },
  },
  data() {
    return {
      // 编辑器实例
      editor: null,
      // 富文本菜单选项配置
      menuItem: [
        "head",
        "bold",
        "fontSize",
        "fontName",
        "italic",
        "underline",
        "indent",
        "lineHeight",
        "foreColor",
        "backColor",
        "link",
        "list",
        "justify",
        "image",
      ],
    };
  },
  watch: {
    // 监听默认值
    defaultText(nv, ov) {
      if (nv != "") {
        this.editor.txt.html(nv);
        this.$emit("update:rich-text", nv);
      }
    },
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    // 初始化编辑器
    initEditor() {
      // 获取编辑器dom节点
      const editor = new WE("#w_view");
      // 配置编辑器
      editor.config.showLinkImg = false; /* 隐藏插入网络图片的功能 */
      editor.config.onchangeTimeout = 400; /* 配置触发 onchange 的时间频率，默认为 200ms */
      editor.config.uploadImgMaxLength = 1; /* 限制一次最多能传几张图片 */
      // editor.config.showFullScreen = false; /* 配置全屏功能按钮是否展示 */
      editor.config.menus = [...this.menuItem]; /* 自定义系统菜单 */
      // editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 限制图片大小 */;
      editor.config.customAlert = (err) => {
        Message.error(err);
      };
      // 监控变化，同步更新数据
      editor.config.onchange = (newHtml) => {
        // 异步更新组件富文本值的变化
        this.$emit("update:rich-text", newHtml);
      };
      // 自定义上传图片
      editor.config.customUploadImg = (resultFiles, insertImgFn) => {
        /**
         * resultFiles：图片上传文件流
         * insertImgFn：插入图片到富文本
         * 返回结果为生成的图片URL地址
         *  通过resultFiles上传给后端拿到返回的地址 src ,然后插入富文本 insertImgFn（src）,以下示例拿到的在线地址
         * */
        upfiles(resultFiles[0]).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "上传成功",
              type: "success",
            });
            insertImgFn(res.result);
          } else {
            this.$message.error("图片上传失败，请重试！");
            insertImgFn();
          }
        });
      };
      // 创建编辑器
      editor.create();
      this.editor = editor;
    },
  },
  beforeDestroy() {
    // 销毁编辑器
    this.editor.destroy();
    this.editor = null;
  },
};
</script>